//1. 引入路由和Vue
import Vue from "vue";
import VueRouter from "vue-router";

//2. 引入路由组件
// import Home from "../pages/Home";
// import Login from "../pages/Login";

// import News from "../pages/Home/News";
// import Music from "../pages/Home/Music";
// import Entertainment from "../pages/Home/Entertainment";

const Home = () => import("../pages/Home");
const Login = () => import("../pages/Login");
const News = () => import("../pages/Home/News");
const Music = () => import("../pages/Home/Music");
const Entertainment = () => import("../pages/Home/Entertainment");
const MusicItem = () => import("../pages/Home/Music/Item");
const NewsItem = () => import("../pages/Home/News/Item");

//3. 使用VueRouter这个插件
Vue.use(VueRouter);

// 解决报错
const oldpush = VueRouter.prototype.push;
VueRouter.prototype.push = function (
  location,
  onComplete = () => {},
  onAbort = () => {}
) {
  oldpush.call(this, location, onComplete, onAbort);
};

//4. 创建路由对象
const router = new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/",
      redirect: "/home",
    },
    {
      component: Home,
      path: "/home",
      name: "Home",
      redirect: "/home/news",
      //   二级路由
      children: [
        // {
        //   path: "",
        //   redirect: "news",
        // },
        {
          path: "news",
          // 或者  path:"/home/news"
          component: News,
          name: "News",
          children: [
            {
              path: "basketball/:name/:price?",
              name: "basketball",
              component: NewsItem,
              props: {
                a: 1,
                b: 2,
              },
            },
            {
              path: "money/:name/:price?",
              name: "money",
              component: NewsItem,
              props: true,
            },
            {
              path: "study/:name/:price?",
              name: "study",
              component: NewsItem,
              // props: ($route) => {
              //   return {
              //     ...$route.params,
              //     a: 1,
              //     b: 2,
              //   };
              // },
              props: ($route) => {
                return {
                  ...$route.params,
                  a: 1,
                  b: 2,
                };
              },
            },
          ],
        },
        {
          path: "music",
          component: Music,
          name: "Music",
          children: [
            {
              path: "jay",
              name: "JAY",
              component: MusicItem,
            },
            {
              path: "jj",
              name: "JJ",
              component: MusicItem,
            },
            {
              path: "eason",
              name: "EASON",
              component: MusicItem,
            },
          ],
        },
        {
          path: "entertainment",
          component: Entertainment,
          name: "Entertainment",
        },
      ],
    },
    {
      component: Login,
      path: "/login",
    },
  ],
});
//5. 把创建好的路由对象暴露出去
export default router;
